<template>
	<view>
		<view>
			<view v-for="(item,key) in list" :key="key" @click="selArea(item)">
				<view class="area-item ">
					<view class="goods-block-address">
						<view class="flex">
							<view class="people-name">{{item.name}}</view>
							<view class="people-tel">{{item.mobile}}</view>
						</view>
						<view class="flex space-between">
							<view class="flex">
								<text class="icondingwei iconfont funct-ico-start"></text>
								<view class="address-name">{{item.areaName}}{{item.addrName}}</view>
							</view>
							<view class="flex">
								<view class="shu">|</view>
								<view  @click.stop="detailAddrupd(item)" class="bianji">
									编辑
								</view>	
							</view>
							
						</view>
						
					</view> 
				</view>
				
			</view>
		</view>
		<view class=" tianjia-item">
			<button @click="toAddAddr" class="tianjia">添加地址</button> 
		</view>
	</view>
</template>

<script>
import {getUserAddressByPage} from '../../service/base.js';		
	export default {
		data() {
			return{
				pageNum: 1,
				list: [],
				isLastPage: false
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			this.list = []
			this.selOrderAddressListByPage()
		},
		/*下拉刷新*/
		onPullDownRefresh: function() {
			console.log("下拉刷新")
		},
		/*上拉刷新*/
		onReachBottom:function(){
		  console.log("上拉刷新")
		  if(!this.isLastPage){
			  this.pageNum ++ 
			  this.selOrderAddressListByPage()
		  }
		},
		methods:{
		 selArea(item){
			 uni.$emit('areaData',JSON.stringify(item))
			 uni.navigateBack({
			 	delta:1
			 })
		 },
	  	 detailAddrupd(item){
			uni.setStorageSync("addr",item)
			uni.navigateTo({
				url:'/pages/addrManage/addrAddOrUpd'
			})
		 },
		  toAddAddr() {
			  uni.navigateTo({
			  	url:'/pages/addrManage/addrAddOrUpd'
			  })
		  },
		  selOrderAddressListByPage() {
			getUserAddressByPage({pageNum:this.pageNum}).then(res =>{
				 if(res.data.list){
					 res.data.list.forEach(item =>{
						 this.list.push(item)
					 })
				 }
				 this.isLastPage = res.data.isLastPage
			})  
		  }
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBFDFB;
		height: 100%;
	}
	.loading-text{
		height: 80upx;
		line-height: 80upx;
		font-size: 25upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.area-item{
		.goods-block-address{
			letter-spacing: 3rpx;
			   margin-top: 16rpx;
			   // height: 120rpx;
			   background-color: #FFFFFF;
			   border-radius: 8rpx;
			.people-name{
				font-size: 26rpx;
				margin-left:107rpx;
				padding-top: 20rpx;
				letter-spacing: 3rpx;
			}
			.people-tel{
				font-size: 20rpx;
				margin-left:10rpx;
				padding-top: 26rpx;
				color: #838383;
				
			}
			.address-name{
				padding-bottom: 25rpx;
				margin-left: 30rpx;
				margin-top: 15rpx;
				font-size: 22rpx;
				color: #2f2f2f;	
			}
			.funct-ico-start{
				margin-left: 30rpx;
				// margin-top: 5rpx;
				font-size: 45rpx;
				color: #f45100;
			}
			.shu{
				height: 24rpx;
				padding-right: 14rpx;
				color: #e6e6e6;
			}
			.bianji{
				align-content:flex-end;
				margin-top: 10rpx;
				font-size: 22rpx;
				color: #909090;
				padding-right: 30rpx;
			}
		}
	}
	.flex{
		display:flex;
	}
	.display_flex_column {
		display: flex;
		flex-direction: column;
	}
	.space-between{
		justify-content:space-between;
	}
	.tianjia-item{
		margin-top: 50rpx;
		margin-bottom: 80rpx;
		.tianjia{
			width: 690rpx;
			text-align: center;
			background-color: #20c16d;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
	
</style>
